<template>
  <div class="auth">
    <div class="bg"></div>
    <div class="title-info">
      <img src="https://aliyuncdn.antdv.com/v2/assets/logo.1ef800a8.svg" alt="">
      <h2 class="title">欢迎您~</h2>
    </div>

    <div class="form">
      <a-tabs>
        <a-tab-pane key="1" tab="登入">
          <a-form ref="formRef" :model="formLogin" :rules="rulesLogin">
            <a-form-item class="item" name="username">
              <a-input size="large" v-model:value="formLogin.username" placeholder="请输入用户名">
                <template v-slot:prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item class="item" name="password">
              <a-input size="large" v-model:value="formLogin.password" placeholder="请输入密码">
                <template v-slot:prefix>
                  <LockOutlined />
                </template>
              </a-input>
            </a-form-item>
            <!-- <div class="item">
              <a href="javascript:;" @click="forgetPassword">忘记密码</a>
            </div> -->

            <div class="item">
              <a-button size="large" type="primary" @click="login">
                登入
              </a-button>
            </div>
          </a-form>

        </a-tab-pane>
        <a-tab-pane key="2" tab="注册">
          <a-form ref="formRef2" :model="formRegister" :rules="rulesRegister">
            <a-form-item class="item" name="username">
              <a-input v-model:value="formRegister.username" placeholder="请输入用户名">
                <template v-slot:prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item class="item" name="password">
              <a-input v-model:value="formRegister.password" placeholder="请输入密码">
                <template v-slot:prefix>
                  <LockOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item class="item" name="repassword">
              <a-input v-model:value="formRegister.repassword" placeholder="请再次确认密码" />
            </a-form-item>
            <div class="item">
              <a-input size="large" placeholder="邀请码" v-model:value="formRegister.inviteCode">
                <template v-slot:prefix>
                  <MailOutlined />
                </template>
              </a-input>
            </div>
            <div class="item">
              <a-button @click="register" size="large" type="primary">
                注册
              </a-button>
            </div>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>

</template>
<script>
import { defineComponent, reactive, ref, toRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index.js";
import { getCharacterInfoById } from "../utils/character";
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
} from "@ant-design/icons-vue";
import { auth } from "../service/index";
import { setToken } from "../utils/token.js";
import { result } from "../utils/result";
import { message } from "ant-design-vue";
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
    MailOutlined,
  },
  setup() {
    const router = useRouter();
    const formRef = ref();
    const formRef2 = ref();
    const formLogin = reactive({
      username: "", //用户名
      password: "", //密码
    });
    const formRegister = reactive({
      username: "", //用户名
      password: "", //密码
      repassword: "", //确认密码
      inviteCode: "", //验证码
    });
    const rulesLogin = {
      username: [
        {
          required: true,
          message: "用户名必填",
          trigger: "blur",
        },
        {
          min: 2,
          max: 6,
          message: "长度应在2-6之间",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "密码必填",
          trigger: "blur",
        },
      ],
    };
    const rulesRegister = {
      username: [
        {
          required: true,
          message: "用户名必填",
          trigger: "blur",
        },
      ],

      password: [
        {
          required: true,
          min: 2,
          max: 6,
          message: "密码长度应在2-6之间",
          trigger: "blur",
        },
      ],
      // todo 验证repass和password一样
      repassword: [
        {
          required: true,
          message: "密码必填",
          trigger: "blur",
        },
      ],
    };

    const login = () => {
      formRef.value
        .validate()
        .then(async () => {
          console.log("values", formLogin, toRaw(formLogin));
          const res = await auth.login(formLogin.username, formLogin.password);
          result(res).success(({ msg, data: { auth, token } }) => {
            // console.log("data",data);
            //把用户数据存到全局
            store.commit("setUserInfo", auth); //存储user信息
            store.commit(
              "setUserCharacter",
              getCharacterInfoById(auth.character)
            );
            // console.log("打印store", store.state);
            setToken(token);
            router.push("/home");
            //router.replace() 不能回退
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    const register = () => {
      formRef2.value
        .validate()
        .then(async () => {
          if (formRegister.password !== formRegister.repassword) {
            message.warning("密码与确认密码不相同");
            return;
          }
          console.log("values", formRegister, toRaw(formRegister));
          //发请求
          const res = await auth.register(
            formRegister.username,
            formRegister.password,
            formRegister.inviteCode
          );
          if (res.data.code == 200) {
            message.success("恭喜你，注册成功");
            activeKey.value = "0";
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    const activeKey = ref("1");
    return {
      activeKey, //tab切换
      formRef, //登录
      formRef2, //注册
      other: "",
      formLogin,
      formRegister,
      rulesLogin,
      rulesRegister,
      login,
      register,
      router,
    };
  },
});
</script>
<style  lang='less' scoped>
.bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url("https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.auth {
  .title-info {
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;

    img {
      width: 60px;
      height: 60px;
    }

    h2 {
      margin: 0;
      margin-left: 18px;
    }
  }

  .form {
    width: 400px;
    margin: 0 auto;

    .item {
      margin-bottom: 16px;

      button {
        width: 100%;
      }
    }
  }
}
</style>